<template>
    <mt-header :title="$route.meta.title" class="myHeader" v-show="showTopBar">
    <span slot="left">
      <router-link to="/setting">
        <mt-button class="mui-icon mui-icon-bars" v-show="!showBack"></mt-button
        ></router-link>
    </span>
        <span slot="left">
      <mt-button
              class="mui-icon mui-icon-back"
              @click="goBack"
              v-show="showBack"
      ></mt-button>
    </span>
        <router-link to="/search" slot="right">
            <mt-button
                    class="mui-icon mui-icon-search"
                    v-show="showSearch"
            ></mt-button>
        </router-link>
    </mt-header>
</template>

<script>
    export default {
        name: "TopBar",
        data() {
            return {
                showBack: false,
                showSearch: false,
                showTopBar: true,
            };
        },
        created() {
            // 项目创建时，如果在这些页面，则返回按钮不显示
            this.showBack =
                this.$route.path !== "/home" &&
                this.$route.path !== "/mine" &&
                this.$route.path !== "/live";
            // 项目创建时，如果在这些页面，则搜索按钮不显示
            this.showSearch =
                this.$route.path !== "/login" && this.$route.path !== "/signUp";
            // 项目创建时，如果在搜索、设置页面，TopBar不显示
            this.showTopBar = this.$route.path !== "/search" && this.$route.path !== "/setting";
        },
        //  监听器，时刻保证对应页面不显示
        watch: {
            "$route.path"(newVal) {
                // 在搜索、设置 页面不显示TopBar
                this.showTopBar = newVal !== "/search" && newVal !== "/setting";
                this.showBack =
                    newVal !== "/home" && newVal !== "/mine" && newVal !== "/live";
                this.showSearch = newVal !== "/login" && newVal !== "/signUp";
            },
        },
        methods: {
            goBack() {
                // 通过go方法退后一个访问页面
                this.$router.go(-1);
            },
        },
    }
</script>

<style lang="scss" scoped>
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
    $padding-out: 0 0.5em;
</style>
